<script setup>
import { ref, reactive,defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits(['switch-to-tips'])
const openTips = () => {
  emit('switch-to-tips')  
}
const tableData = ref([
  {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  }, {
    orderDate: '2024-11-10',
    orderNumber: '3708660052973347',
    invoiceAmount: '240',
    domain: '190.vip、domain2.com、domain3.cn等20个域名',
    status: '不可开具',
  },
])
const stepValue = ref(1)
const formInline = reactive({
  date: '',
  keyword: '',
})
const isFocused = ref(false)
const focusInput = () => {
  isFocused.value = true
  console.log('222222')
}
const blurInput = () => {
  isFocused.value = false
}
const checkedAll = ref(false)
const checkedPage = ref(false)
const form = reactive({
  invoiceAmount: '200',
  fpTitle: '',
  kjType: '1',
  fpType: '1',
  fpContent: '1',
  fpForm: '2',
  email: '4448498392@qq.com',
  name: '张三',
  phone: '13800138000',
  address: '北京市海淀区',
  remark: '备注',
})

const openDialog = () => {
  ElMessageBox.confirm(
    '<span style="color: #ff0000;">提交后可能无法撤回，且关联订单不可再次申请开票，确定提交开票吗？</span> <span style="color: #999999;">确定提交开票吗？</span>',
    '提交开票申请',
    {
      confirmButtonText: '提交',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      stepValue.value = 3
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消提交',
      })
    })
}
const openNotice = () => {
  ElMessage({
    message: '已通知管理员优先处理您的申请',
    type: 'success',
    plain: true,
  })
}


</script>
<template>
  <div class="bs-panel">
    <div class="bs-panel-body">
      <div class="page-title bold">开票申请</div>
      <div class="page-steps">
        <div class="step-item" :class="{ 'active': stepValue >= 1 }">
          <div class="step-item-title">1</div>
          <div class="step-item-desc">选择订单</div>
        </div>
        <div class="step-item" :class="{ 'active': stepValue >= 2 }">
          <div class="step-item-title">2</div>
          <div class="step-item-desc">填写信息</div>
        </div>
        <div class="step-item" :class="{ 'active': stepValue >= 3 }">
          <div class="step-item-title">3</div>
          <div class="step-item-desc">审核处理</div>
        </div>
        <div class="step-item" :class="{ 'active': stepValue >= 4 }">
          <div class="step-item-title">4</div>
          <div class="step-item-desc">开票成功</div>
        </div>
      </div>
    </div>
    <!-- 第一步 -->
    <template v-if="stepValue === 1">
      <div class="bs-panel-body">
        <div class="filter-cell">
          <div class="table-top" @click="openTips">找不到订单?</div>
          <el-form :inline="true" :model="formInline" class="form-inline">
            <el-form-item>
              <el-date-picker v-model="formInline.date" type="daterange" style="width: 300px;" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
              <div class="keyword-box">
                <el-input v-model="formInline.keyword" type="textarea" placeholder="查找域名/后缀 如：.cn 多个域名/后缀用换行分隔"
                  style="width: 200px;" v-if="isFocused" @blur="blurInput" resize="none" rows="4">
                  <template #suffix>
                    <el-icon class="el-input__icon">
                      <Search />
                    </el-icon>
                  </template>
                </el-input>
                <el-input v-model="formInline.keyword" type="text" placeholder="查找域名/后缀 如：.cn" style="width: 200px;"
                  @focus="focusInput" v-else>
                  <template #suffix>
                    <el-icon class="el-input__icon">
                      <Search />
                    </el-icon>
                  </template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-icon size="20" color="#666">
                <Refresh />
              </el-icon>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="orderDate" label="订单日期" width="160" align="center" />
          <el-table-column prop="orderNumber" label="订单号" width="300" align="center" />
          <el-table-column prop="invoiceAmount" label="可开票金额（元）" width="200" align="center" />
          <el-table-column prop="domain" label="相关域名" align="center" />
          <el-table-column prop="status" label="状态" width="200" align="center" />
        </el-table>
        <div class="bs-panel-footer">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
      </div>
      <div class="bs-panel-end">
        <el-checkbox v-model="checkedAll" label="选中全部" size="large" />
        <el-checkbox v-model="checkedPage" label="选中本页" size="large" />
        <div class="total-amount">
          当前选中订单 <span class="total-amount-num">3</span> 个，开票金额共计 <span class="total-amount-num">240</span> 元
        </div>
        <el-button type="primary" @click="stepValue = 2">下一步</el-button>
      </div>
    </template>
    <!-- 第二步 -->
    <template v-if="stepValue === 2">
      <div class="bs-panel-step">
        <div class="panel-tip">
          当前选中订单 <span class="text-primary">3</span> 个，开票金额共计 <span class="text-primary">240</span> 元。订单金额是否合并在一张发票中，将根据财务实际情况决定。
        </div>
        
        <el-form :model="form" label-width="120" label-position="left" style="max-width: 100%">
          <el-form-item label="选择发票抬头">
            <el-select v-model="form.fpTitle" placeholder="请选择发票抬头" style="width: 300px;">
              <el-option label="个人 - 张三" value="1" />
              <el-option label="企业 - 190.vip" value="2" />
              <el-option label="个人 - 李四" value="3" />
              <el-option label="企业 - 190.com" value="4" />
            </el-select>
            <div class="fp-title-link">
              <el-link type="blue" >新增+</el-link>
              <el-link type="blue" >管理我的抬头</el-link>
            </div>
          </el-form-item>
          <el-form-item label="开具类型">
            <el-radio-group v-model="form.kjType" disabled>
              <el-radio label="个人" value="1" />
              <el-radio label="企业" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票类型">
            <el-radio-group v-model="form.fpType" disabled>
              <el-radio label="增值税普通发票" value="1" />
              <el-radio label="增值税专用发票" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票内容">
            <el-radio-group v-model="form.fpContent">
              <el-radio label="域名服务费" value="1" />
              <el-radio label="信息服务费" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票形式">
            <el-radio-group v-model="form.fpForm">
              <el-radio label="电子发票" value="1" />
              <el-radio label="纸质发票（顺丰到付）" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电子邮箱" v-if="form.fpForm === '1'">
            <el-input v-model="form.email" style="width: 300px;" placeholder="请输入电子邮箱" />
          </el-form-item>
          <template v-else>
            <el-form-item label="收件人">
              <el-input v-model="form.name" style="width: 300px;" placeholder="请输入收件人" />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phone" style="width: 300px;" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="收件地址">
              <el-input v-model="form.address" style="width: 300px;" placeholder="请输入真实收件地址" />
              <span class="address-tip">如：xx省xxx市xx县(区)xx路(街道)xx号</span>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.address" style="width: 300px;" placeholder="" />
            </el-form-item>
          </template>
        </el-form>
      </div>
      <div class="bs-panel-end">
        <el-button type="" @click="stepValue = 1" style="margin-left: auto;">上一步</el-button>
        <el-button type="primary" @click="openDialog">提交申请</el-button>
      </div>
    </template>
    <!-- 第三步 -->
    <template v-if="stepValue === 3">
      <div class="bs-panel-step" style="padding: 35px 300px;">
        <div class="panel-tip" style="text-align: center;">
          您的开票申请已成功提交，我们正在审核并处理。预计将在7个工作日内完成。<br>
          感谢您的耐心等待！如有疑问，请联系客服。<el-link type="blue" @click="openNotice">催一下</el-link>
        </div>
        <div class="page-title bold">发票信息</div>
        <div style="padding: 0 50px;">
          <el-form :model="form" label-width="120" label-position="left" style="max-width: 100%">
          <el-form-item label="发票金额">
            <span>¥ {{ form.invoiceAmount }}</span>
          </el-form-item>
          <el-form-item label="选择发票抬头">
            {{ form.fpTitle }}
          </el-form-item>
          <el-form-item label="开具类型">
            <el-radio-group v-model="form.kjType" disabled>
              <el-radio label="个人" value="1" />
              <el-radio label="企业" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票类型">
            <el-radio-group v-model="form.fpType" disabled>
              <el-radio label="增值税普通发票" value="1" />
              <el-radio label="增值税专用发票" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票内容">
            <el-radio-group v-model="form.fpContent" disabled>
              <el-radio label="域名服务费" value="1" />
              <el-radio label="信息服务费" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发票形式">
            <el-radio-group v-model="form.fpForm" disabled>
              <el-radio label="电子发票" value="1" />
              <el-radio label="纸质发票（顺丰到付）" value="2" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电子邮箱" v-if="form.fpForm === '1'">
            {{ form.email }}
          </el-form-item>
          <template v-else>
            <el-form-item label="收件人">
              {{ form.name }}
            </el-form-item>
            <el-form-item label="手机号码">
              {{ form.phone }}
            </el-form-item>
            <el-form-item label="收件地址">
              {{ form.address }}
            </el-form-item>
            <el-form-item label="备注">
              {{ form.remark }}
            </el-form-item>
            </template>
            <div class="form-footer">
              <el-button type="primary">发票夹</el-button>
              <el-button >继续开票</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </template>
    <!-- 第四步 -->
    <template v-if="stepValue === 4">
      <div class="bs-panel-body">
      </div>
    </template>
  </div>
</template>
<style scoped lang='scss'>
.bs-panel-step{
  padding: 35px 50px;
}
.address-tip{
  margin-left: 10px;
  color: #999;
}
.panel-tip{
  margin-bottom: 25px;
}
.fp-title-link{
  line-height: 1.3;
  margin-top: 15px;
  width: 100%;
  .el-link{
    margin-right: 15px;
  }
}
.bs-panel-end {
  display: flex;
  align-items: center;
  padding: 15px;
  box-shadow: -1px -1px 10px #d3d7dc;

  .total-amount {
    margin-left: auto;
    margin-right: 15px;

    .total-amount-num {
      color: #e68f36;
      font-weight: bold;
    }
  }
}

.page-steps {
  display: flex;
  align-items: center;
  justify-content: center;

  .step-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 100px;
    color: #999;
    margin: 0 10px;

    &:last-child {
      padding-right: 0;
    }

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 100px;
      width: 100px;
      height: 1px;
      background-color: #d3d7dc;
    }

    &:last-child::before {
      display: none;
    }

    .step-item-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border: 1px solid #d3d7dc;
      color: #d3d7dc;
      border-radius: 50%;
      margin-right: 6px;
    }
  }

  .step-item.active {
    color: #e68f36;
    &::before {
      background-color: #e68f36;
    }
    .step-item-title {
      border-color: #e68f36;
      background-color: #e68f36;
      color: #fff;
    }
  }
}

.table-top {
  color: #666;
  cursor: pointer;
}

.dis-view {
  padding: 0 20px;
}

.view-row {
  padding: 0 20px;

  .el-col {
    margin-bottom: 20px;
  }
}

.view-label {
  color: rgba(0, 0, 0, 0.42745098039215684);
  margin-bottom: 10px;
}

.view-value {
  color: rgba(0, 0, 0, 0.42745098039215684);

  .val {
    font-size: 24px;
    color: #000;
  }
}

.message-body {
  padding: 10px 25px;
}

.bs-panel-body {
  position: relative;
  padding: 25px;
}

.bs-panel-body:first-child:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #d3d7dc;
}

.form-footer,
.form-top {
  height: 32px;
  text-align: center
}

.bs-panel-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.keyword-box {
  height: 32px;
}

.filter-cell {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.filter-box {
  display: flex;
  align-items: center
}

.filter-box .el-select {
  margin: 0 10px;
}

.filter-cell ::v-deep .el-form-item {
  margin-right: 12px;
  margin-bottom: 0;
}
</style>